Component({
  properties: {
    isShow: Boolean,
    skeletonData: Object,
    hasDefaultData: Boolean,
    selector: {
      type: String,
      value: 'skeleton',
    },
    selectorType: {
      type: Array,
      value: ['rect', 'circle'],
    },
    loading: {
      type: String,
      value: 'shine',
    },
    bgcolor: {
      type: String,
      value: '#ffffff',
    },
  },

  methods: {
    getElementInfo(selector) {
      return new Promise(resolve => {
        wx.createSelectorQuery().selectAll(selector).fields({
          size: true,
          rect: true,
        }).exec(res => resolve(res[0]));
      });
    },

    getStyle(obj) {
      return Object.keys(obj)
        .map(key => `${key}:${obj[key] * 2}rpx`)
        .join(';');
    },

    getParentElement() {
      const {
        selector,
      } = this.data;

      return this.getElementInfo(`.${selector}`)
        .then(element => element
          .map(item => this.getStyle(item))
        ).then(styles => ({
          styles,
        }));
    },

    getChildElement() {
      const {
        selector,
        selectorType,
      } = this.data;

      return Promise.all(selectorType
        .map(type => this.getElementInfo(`.${selector}-${type}`)
          .then(element => element
            .map(item => this.getStyle(item))
          ).then(styles => ({
            type,
            styles,
          }))
        )
      );
    },

    async getDefaultData() {
      try {
        const {
          hasDefaultData,
        } = this.data;

        if (hasDefaultData) return;

        const parentElement = await this.getParentElement();
        const childElement = await this.getChildElement();

        console.log(JSON.stringify({
          parentElement,
          childElement,
        }, null, 2));
      } catch (error) {
        console.log('getDefaultData error', error);
      }
    },
  },

  lifetimes: {
    attached() {
      this.getDefaultData();
    },
  },
});
